import React, { Component, PropTypes } from 'react';
require('isomorphic-fetch');

class Parent extends Component {
    constructor(props) {
        super(props);
        console.log("props", props);
        this.state = {
            txt: 123,
            xo: []
        }
    }

    componentWillMount() {
        fetch('users')
            .then(function (response) {
                if (response.status >= 400) {
                    throw new Error("Bad response from server");
                }
                return response.json();
            })
            .then(function (stories) {
                console.log(stories);
            });
    }

    childChange(value) {
        this.setState({
            txt: value
        });
    }
    render() {
        return (
            <div>
                {this.state.txt}
                <Child tab="输入框" txt={this.state.txt} callback={this.childChange.bind(this)} />
                <hr/>
                <Child2 v={this.state.txt}/>
            </div>
        );
    }
}


class Child2 extends Component {
    constructor(props) {
        super(props);
        console.log("Child2 props", props);
        this.state={
            xo:this.props.v
        }
    }


    render() {
        return (
            <div>
                <em>Child2:{this.props.v}</em>
            </div>
        );
    }
}



var Child = React.createClass({
    getInitialState: function () {
        return {
            txt: this.props.txt
        };
    },
    toChange: function (event) {
        var newState = event.target.value;
        this.setState({
            txt: newState
        });
        this.props.callback(newState);
    },
    render: function () {
        return (
            <div>
                <span>{this.props.tab}</span>
                <input type="text" value={this.state.txt} onChange={this.toChange} />
            </div>
        );
    }
});




class componentName extends Component {
    constructor(props) {
        super(props);

    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {

    }

    componentWillUpdate(nextProps, nextState) {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return (
            <div>

            </div>
        );
    }
}


export default Parent;